.pm_form {
    // To remove the bottom margin from forms where pm_grid and errors are used, because errors are always shown
    // Example: payments form modal, and filter modal
    .card-container, &.filter-form {
        .pm_grid {
            margin: 0;
        }
    }

    .pm_select {
        position: relative;
        display: block;
        box-shadow: inset 0 0 0 1px $border, 0 1px 2px rgba(0,0,0,.1);
        border-radius: 2px;
        &.inline {
            display: inline-block;
            select {
                width: 8rem;
                &.autoWidth{
                    width:auto;
                }
            }
        }
        &.bigger {
            select {
                width: 10rem;
            }
        }
        &.mini {
            select {
                width: 4rem;
            }
        }
        select::-ms-expand {
            display: none;
        }
        select {
            margin: 0;
            height: 35px;
            line-height: 35px;
            padding-left: 10px;
            padding-right: 25px;
            position: relative;
            z-index: 3;
            background: transparent;
            border: none;
            width: 100%;
            max-width: 100%;
            min-width: 3rem;
            -webkit-appearance: none;
               -moz-appearance: none;
                    appearance: none;
            &[disabled] {
                background: rgba(0,0,0,0);
            }
            &:focus::-ms-value {
                color: #000;
                background: #fff;
            }
        }
        .fa {
            position: absolute;
            right: 0;
            display: block;
            text-align: center;
            top: 0;
            bottom: 0;
            height: 35px;
            line-height: 35px;
            z-index: 1;
            width: 2rem;
            color: $text;
        }
    }

    select {
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
        cursor: pointer;
        background: $white;
        &.ng-invalid.ng-touched,
        &.ng-invalid.ng-touched:focus,
        &.ng-invalid.always-show-ng-invalid,
        &.ng-invalid.always-show-ng-invalid:focus {
            color: $red;
        }
    }

    textarea.code {
        font-family: monospace;
        white-space: pre;
        word-break: none;
        line-height: 1rem;
        resize: vertical;
        height: 10rem;
        padding: 1rem;
    }

    // wrapper for placing icons inside inputs
    .input-icon {
        position: relative;
        &.right {
            input[type="text"],
            input[type="number"] {
                padding-left: 20px;
            }
            .fa {
                left: auto;
                right: 1px;
            }
        }
        input[type="text"],
        input[type="number"],
        input[type="tel"] {
            position: relative;
            padding-left: 2rem;
        }
        .fa {
            position: absolute;
            left: 1px;
            top: 1px;
            bottom: 1px;
            text-align: left;
            display: block;
            line-height: 32px;
            height: 32px;
            color: $default-color-light;
            text-align: center;
            width: 2rem;
            z-index: 2;
        }
    }

    input[type="text"],
    input[type="number"],
    input[type="tel"],
    input[type="password"],
    input[type="email"],
    input[type="search"],
    input[type="url"],
    select {
        height: 35px;
    }

    input[type="text"],
    input[type="number"],
    input[type="tel"],
    input[type="password"],
    input[type="email"],
    input[type="search"],
    input[type="url"] {
        box-shadow: inset 0 2px 5px rgba(0,0,0,.15);
        background: #fafafa;
        &.inline {
            display: inline-block;
            width: 8rem;
        }
        &.bigger {
            width: 10rem;
        }
        &.mini {
            width: 5rem;
        }
        &.search {
            border-radius: 32px;
        }
    }

    select:active,
    select:focus {
        box-shadow: inset 0 0 0 1px $primary;
    }

    [ng-messages] { pointer-events: none }

    input[type="text"],
    input[type="number"],
    input[type="tel"],
    input[type="password"],
    input[type="email"],
    input[type="search"],
    input[type="url"],
    select,
    textarea {
        line-height: 35px;
        border: 1px solid $border;
        color: $text;
        display: block;
        width: 100%;
        font-size: 1em;
        border-radius: $border-radius-large;
        position: relative;
        resize: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

        & + [ng-messages] {
            opacity: 0;
        }
        // Set the error container div to have the same height as the error message will have.
        // Assume that the error message will fit on one row.
        & + [ng-messages], & + [ng-messages] p {
            margin: 0.6em 0 0.8em 0;
        }
        // Display the error messages with opacity to prevent reflow.
        &.ng-invalid.ng-touched:not(:focus) + [ng-messages],
        &.ng-invalid.ng-dirty + [ng-messages] {
            opacity: 1
        }
        // Add a red border color to the input.
        &.ng-invalid.ng-dirty { border-color: $red; }
        &.ng-invalid.ng-touched:not(:focus) { border-color: $red; }
        &.ng-invalid.always-show-ng-invalid { border-color: $red; }

        &.inline {
            display: inline-block;
            width: 8rem;
        }
        &:hover {
            border-color: $border;
        }
        &:focus {
            color: $black;
            border-color: $primary;
        }
        &[disabled],
        &.disabled {
            color: #bbb;
            border-color: lighten($border, 5%);
            background: #fcfcfc;
            pointer-events: none;
        }
        &[readonly] {
            box-shadow: none;
        }
        &.success {
            color: darken(#aecf96, 10%);
            border-color: #aecf96;
        }
        &.error {
            color: darken(#cf9696, 10%);
            border-color: #cf9696;
        }
        &.warning {
            color: darken(#d9c4a2, 10%);
            border-color: #d9c4a2;
        }
    }
    input[type="text"],
    input[type="number"],
    input[type="tel"],
    input[type="password"],
    input[type="email"],
    input[type="search"],
    input[type="url"],
    select,
    textarea {
        padding: 0 20px;
        margin: 0;
        &.noBorder {
            border-color: transparent !important;
        }
        &.margin {
            margin-bottom: 10px;
        }
    }
    input[type="password"] {
        line-height: 1;
    }

    /* reset arrow on number input */

    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type="number"] {
        -moz-appearance: textfield;
    }

    textarea {
        min-height: 6rem;
        box-shadow: inset 0 2px 4px rgba(0,0,0,.15);
        background: #fafafa;
        padding: .5rem 1rem;
        line-height: 1.5rem;
    }

    select {
        width: initial;
        line-height: 32px;
        height: 32px;
    }
    .margin {
        margin-bottom: 10px;
    }


    label,
    .label {
        height: 35px;
        @include flexRow();
        @include flexAlignCenter();
        > .customMaskInput-container {
            /*custom inputs*/
            width: auto;
        }
        > :not(:only-child) {
            /* label with childs */
            @include flexSelfCenter();
            margin-right:.4rem;
        }

        > .label-fillWidth { @include flexFillWidth() }

        &:after {
            content:'';
            clear: both;
        }
        &.labelFix {
            height: auto;
        }

        &.label-block {
            display: block;
        }
    }

    .multi-line-label {
        /*
            IE10 won't align center without a defined height
            fix by wrapping into a flexColumn
        */
        @include flexColumn();
        > label {
            height: auto;
            min-height: 25px;
            padding: 5px 0px;
        }
    }

    .row {
        float: left;
        width: 100%;
        clear: both;
    }

    .pm_single_action {
        @include flexRow();
        .input:last-of-type {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
        .pm_button:first-of-type {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }
}

// ng-submitted is not always with .pm-form, so need to lift it out.
.ng-submitted {
    input,
    select,
    textarea {
        &.ng-invalid + [ng-messages] {
            opacity: 1 !important;
        }
        &.ng-invalid {
            border-color: $red !important;
        }
    }
}
